<!--
/**
* Author: gaohui
* Date: 2023-03-02 11:20
* Desc: KeepAliveComp KeepAlive组件
*/
-->

<template>
  <title-line title="keep-alive基础用法" />
  <el-radio-group v-model="chooseValue" class="mt10">
    <el-radio label="1" size="large">组件A</el-radio>
    <el-radio label="2" size="large">组件B</el-radio>
  </el-radio-group>
  <keep-alive :include="includeCompName">
    <comp-a v-if="chooseValue === '1'" />
    <comp-b v-else />
  </keep-alive>
  <div class="tip-text mt10 mb10">（修改名称后再切换组件，组件A做了缓存操作）</div>
</template>

<script name="KeepAliveComp" lang="ts" setup>
import { ref } from "vue";
import CompA from "./components/CompA.vue";
import CompB from "./components/CompB.vue";

// keep-alive组件可用于列表与详情页之前的跳转操作

const chooseValue = ref("1");
// 缓存包含组件A
const includeCompName = ["CompA"];
</script>
<style lang="scss" scoped>
.tip-text {
  padding: 0 10px;
  box-sizing: border-box;
  font-size: 14px;
  color: #999999;
}
</style>
